<template>
  <div class="flex-column full-h">
    <div class="flex-stretch tab mg-t30 pd-x30">
      <div @click="data.type=index" class="flex-item" v-for="(item, index) in menu" :index="index" :key="index" :class="{'active':data.type==index}">{{item}}</div>
    </div>
    <swiper class="swiper hide flex-item" interval="5000" duration="1000" :current="data.type" @change="swiperChange">
      <block v-for="(item, index) in menu" :index="index" :key="index">
        <swiper-item>
          <div class="mg-t30 bg-f pd-f30">
            <div class="flex-space-between">
              <picker class="s-l" @change="fromChange" :value="fromIndex" :range="from" range-key="name">
                <view class="picker">
                  {{from[fromIndex].name}}
                </view>
              </picker>
              <div>到</div>
              <picker class="s-l" @change="toChange" :value="toIndex" :range="to" range-key="name">
                <view class="picker">
                  {{to[toIndex].name}}
                </view>
              </picker>
            </div>
            <div class="mg-t30 flex-middle">
              <label class="mg-r10">时间：</label>
              <picker class="s-time" mode="date" :value="date.select" :start="date.start" :end="date.end" @change="dateChange">
                <view class="picker">
                  {{date.select}}
                </view>
              </picker>
              <picker class="s-time mg-l30" mode="time" :value="time.select" @change="timeChange">
                <view class="picker">
                  {{time.select}}
                </view>
              </picker>
            </div>
            <div class="mg-t30 flex-middle" v-if="index==0">
              <label class="mg-r10">行李：</label>
              <label class="mg-r30" @click="haveBagChange(false)">
                <radio value="flase" :checked="!data.haveBag" />无
              </label>
              <label class="" @click="haveBagChange(true)">
                <radio value="true" :checked="data.haveBag" />有
              </label>
            </div>
            <div class="mg-t30 flex-middle">
              <label class="mg-r10" v-if="index==0">人数：</label>
              <label class="mg-r10" v-if="index!=0">余位：</label>
              <label class="mg-r30" @click="numChange(1)">
                <radio :value="1" :checked="data.num==1" />1
              </label>
              <label class="mg-r30" @click="numChange(2)">
                <radio :value="2" :checked="data.num==2" />2
              </label>
              <label class="mg-r30" @click="numChange(3)">
                <radio :value="3" :checked="data.num==3" />3
              </label>
              <label class="mg-r30" @click="numChange(4)">
                <radio :value="4" :checked="data.num==4" />4
              </label>
            </div>
            <div class="mg-t30 flex-box">
              <label class="mg-r10">备注：</label>
              <textarea class="flex-item bd-grey tt" v-model="data.remark" maxlength="50" placeholder="如：肯德基上车" />
            </div>
          </div>
          <button class="mg-f30" type="primary" @click="commit">发布</button>
        </swiper-item>
      </block>
    </swiper>
  </div>
</template>

<script>
// import { mapState, mapMutations } from 'vuex'
export default {
  components: {},
  data() {
    let nowDate = new Date()
    let startDate = this.f.formatTime(nowDate, 'YYYY-MM-DD')
    let nowTime = this.f.formatTime(nowDate, 'HH:mm')
    let temDate = nowDate.setMonth(nowDate.getMonth() + 1)
    let endDate = this.f.formatTime(temDate, 'YYYY-MM-DD')
    return {
      date: {
        start: startDate,
        end: endDate,
        select: ''
      },
      time: {
        select: nowTime
      },
      menu: ['我要拼车', '我是车主'],
      fromIndex: 0,
      from: [
        {
          name: '橙子'
        },
        {
          name: '机场地铁'
        }
      ],
      toIndex: 1,
      to: [
        {
          name: '橙子'
        },
        {
          name: '机场地铁'
        }
      ],
      data: {
        // 类型： 0拼车 1车主
        type: 0,
        // 起点
        from: '',
        // 终点
        to: '',
        // 行李
        haveBag: false,
        // 人数、余位
        num: 1,
        // 备注
        remark: '',
        // 时间
        time: '',
        // 创建时间
        cTime: ''
      },
      logs: []
    }
  },
  methods: {
    // 日期选择
    dateChange(argData) {
      this.date.select = argData.target.value
    },
    // 时间选择
    timeChange(argData) {
      this.time.select = argData.target.value
    },
    // tab切换
    swiperChange(e) {
      this.data.type = e.target.current
    },
    // 行李
    haveBagChange(argData) {
      this.data.haveBag = argData
    },
    // 人数
    numChange(argData) {
      this.data.num = argData
    },
    // 起点开始
    fromChange(e) {
      this.fromIndex = e.target.value
    },
    // 终点开始
    toChange(e) {
      this.toIndex = e.target.value
    },
    // 发布
    commit() {
      this.data.time = this.date.select + ' ' + this.time.select
      this.data.cTime = +new Date()
      this.data.from = this.from[this.fromIndex].name
      this.data.to = this.to[this.toIndex].name
      console.log(this.f.formatTime(new Date(this.data.time)), this.data)
    }
  },
  computed: {},
  watch: {},
  create() {},
  mounted() {
    // 挂载
  },
  onShow() {
    // 活动时
    this.date.select = this.date.start
  }
}
</script>

<style scope lang="scss">
@import '../../asset/css/index.scss';
$bdr: 10px;
page {
  background-color: $bg0;
}
.tab {
  > div {
    background-color: $bgf;
    text-align: center;
    padding: 10px 0;
    &:first-child {
      border-top-left-radius: $bdr;
      border-bottom-left-radius: $bdr;
    }
    &:last-child {
      border-top-right-radius: $bdr;
      border-bottom-right-radius: $bdr;
    }
    transition: all 0.3s ease;
  }
  .active {
    @include iBtnBgColor($themeCol);
    color: #fff;
  }
}
.s-l {
  width: 300px;
  text-align: center;
  border-radius: $bdr;
  border: 1px solid $themeCol;
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
}
label {
  display: inline-block;
  min-width: 110px;
}
.swiper {
  height: 90vh;
}
.tt {
  height: 150px;
  padding: 20px;
}
.s-time {
  padding: 10px 30px;
  border: 1px solid $themeCol;
  border-radius: $bdr;
}
.j-c-s {
  justify-content: start;
}
</style>
